<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="jquery/layout-default-latest.css" />
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery/jquery.layout-latest.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/helper.js"></script>
<script type="text/javascript" src="js/controller.js"></script>

<title>Email Registration System</title>

<script type="text/javascript">
	var currentGroupId = "";
	var currentMsgHead = 0;
	
	var chatPollId = null;
	
	var applicationContext = {
		pageControllers : {
			loginPage : {
				setUp : setUpLoginPage,
				tearDown : tearDownLoginPage
			},
			confirmRegisterPage : {
				setUp : setUpConfirmRegisterPage,
				tearDown : tearDownConfirmRegisterPage,
			},
			mainPage : {
				setUp : setUpMainPage,
				tearDown : tearDownMainPage
			}
		}
	};

	$(function() {
		var command = getUrlParameter("command");

		var pageToInit = null;
		if (command === "login") {
			pageToInit = "loginPage";
		} else if (command === "confirmRegister") {
			pageToInit = "confirmRegisterPage";
		} else {
			pageToInit = "loginPage";
		}

		$("div[id$='Page'][id!='" + pageToInit + "']").each(
				function(index, item) {
					var pageId = $(this).attr("id");
					$(this).hide(0, function() {
						applicationContext.pageControllers[pageId].tearDown();
					});
				});
		$("#" + pageToInit).show(0, function() {
			applicationContext.pageControllers[pageToInit].setUp();
		});
	});
</script>

</head>
<body>
	<div class="wrapper">
		<div id="loginPage">
			<section class="container">
				<div class="login">
					<h1>Login to Email System</h1>
					<form id="signinForm" action="/Login" method="post">
						<p>
							<input id="email" type="text" name="email" value=""
								placeholder="Username or Email">
						</p>
						<p>
							<input id="password" type="password" name="password" value=""
								placeholder="Password">
						</p>
						<p>
						<p class="submit">
							<input id="signIn" type="submit" name="signIn" value="Login">
						</p>
					</form>
				</div>

				<div class="login-help">
					<p>
						Forgot your password? 
						<a id="forgotPassword" href="remind.html">
							<font color="black">Click here to retrieve password</font>
						</a>
					</p>
				</div>
				<div class="login-help">
					<p>
						New User? 
						<a id="link-signup" href="">
							<font color="black">Click here to register</font>
						</a>
					</p>
				</div>
			</section>
		</div>


		<div id="confirmRegisterPage"></div>


		<div id="mainPage">
			<div class="main-content">
				<div class="west">
					<h3>Group List</h3>
					<ul id="groupList"></ul>
				</div>
				
				<div class="center">
					<div class="center-west">
						<h3>Member List</h3>
						<ul id="memberList"></ul>
					</div>
					
					<div class="center-center">
						<div class="center-center-center" id="chatMessageList"></div> 
						
						<div class="center-center-south">
							<input type="text" id="chatMessage" name="chatMessage" />
							<button id="sendMessage">Send</button>
						</div>
					</div>
				</div>
				
				<div class="south">
					<div style="float: left">
						<button id="createGroup">Create Group</button>
						<button id="refreshGroup">Refresh Group</button>
						<button id="inviteGroup">Invite</button>
					</div>
					
					<div style="float: right">
						<button id="resetPassword">Reset password</button>
						<button id="deleteAccount">Delete account</button>
						<button id="signOut">Sign out</button>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="templateContainer hidden">
		<div id="signupDialogTemplate" title="Sign Up">
			<form action="" method="post">
				<div class="email-div">
					<label for="signupEmail" class="email-label">Enter your
						email</label> <input id="signupEmail" name="signupEmail" type="email" />
				</div>
			</form>
		</div>

		<div id="remindDialogTemplate" title="Remind">
			<form action="" method="post">
				<div class="email-div">
					<label for="remindEmail" class="email-label">Enter your
						email</label> <input id="remindEmail" name="remindEmail" type="email" />
				</div>
			</form>
		</div>
		
		<div id="newGroupDialogTemplate" title="New group">
			<form action="" method="post">
				<div class="email-div">
					<label for="groupName" class="email-label">
						Enter your group name
					</label>
					<input id="groupName" name="groupName" type="text" />
				</div>
			</form>
		</div>
		
		<div id="inviteDialogTemplate" title="Invite">
			<form action="" method="post">
				<div class="email-div">
					<label for="groupName" class="email-label">
						Select a group
					</label>
					<select id="group" name="group">
						<option value="">Select a group</option>
					</select>
				</div>
				<div class="email-div">
					<label for="groupName" class="email-label">
						Enter address to send invitation
					</label>
					<input id="guest" name="guest" type="email" />
				</div>
			</form>
		</div>

		<div id="spinningWheelDialogTemplate">
			<p>Please wait...</p>
			<img src='images/spinner_squares_circle.gif' alt='Spinning Wheel' />
		</div>
	</div>
	<span id="contextPath" class="hidden"><%=request.getContextPath()%></span>
</body>
</html>